module.exports = {
  extends: [
    "stylelint-config-prettier",
    "stylelint-config-standard",
    "stylelint-config-sass-guidelines",
  ],
  plugins: ["stylelint-scss", "stylelint-order"],
  customSyntax: "postcss-scss",
  rules: {
    "media-feature-range-notation": null,
    "selector-class-pattern": null,
    "declaration-no-important": true,
    "no-invalid-double-slash-comments": null,
    "max-nesting-depth": null,
    "selector-max-id": 3,
    "order/order": ["custom-properties", "declarations"],
    "order/properties-order": [
      {
        groupName: "positioning",
        properties: ["position", "top", "right", "bottom", "left", "z-index"],
        order: "flexible",
      },
      {
        groupName: "display",
        properties: ["display", "visibility", "float", "clear"],
        order: "flexible",
      },
      {
        groupName: "box-model",
        properties: ["box-sizing", "width", "height", "margin", "padding"],
        order: "flexible",
      },
      {
        groupName: "typography",
        properties: [
          "font-family",
          "font-size",
          "font-weight",
          "line-height",
          "color",
          "text-align",
          "text-transform",
          "text-decoration",
        ],
        order: "flexible",
      },
      {
        groupName: "background",
        properties: [
          "background-color",
          "background-image",
          "background-repeat",
          "background-position",
          "background-size",
          "background",
        ],
        order: "flexible",
      },
      {
        groupName: "border",
        properties: [
          "border",
          "border-top",
          "border-right",
          "border-bottom",
          "border-left",
          "border-radius",
        ],
        order: "flexible",
      },
      {
        groupName: "animation",
        properties: ["animation", "transition"],
        order: "flexible",
      },
    ],
  },
};
